<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title th:text="${webConfig.webName}">首页</title>
    <meta name="description" th:content="${webConfig.webDes}">
    <meta th:content="${webConfig.webKeywords}" name="keywords" />
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
  <link rel="stylesheet" th:href="@{/static/swiper/swiper-3.4.2.min.css}">
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
    <script th:src="@{/static/jquery/jquery-3.4.1.min.js}"></script>
  <style>
        html, body {
            position: relative;
            height: 100%;
        }
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color:#000;
            margin: 0;
            padding: 0;
        }
        .footer{
          width: 100%;
          height: 100px;
          line-height: 100px;
          background-color: #393D49;
          text-align: center;
          color: #ffffff;
        }
        .swiper-container {
            width: 100%;
            height: 100%;
            max-height: 438px;
            max-height: 790px;
            
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-blockbox;
            display: -webkit-block;
            display: block;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-container2 {
        width: 100%;
        height: 400px;
        margin: 20px auto;
        }

        .swiper-p2 .img{
          overflow: hidden;
        }
        .swiper-p2 img{
          width: 100%;
          height: 300px;
          transition: all 0.6s;
        }

        .swiper-p2 img:hover{
          
          transform: scale(1.2); /* 放大1.2倍 */
        }


        .swiper-p2 .title{
          width: 100%;
          height: 30px;
          float: left;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-weight: bold;
          margin-top: 10px;
        }

        .swiper-p2 .buyMoney{
          width: 26%;
          height: 38px;
          float: left;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-weight: bold;
          margin-top: 10px;
          color: red;
          line-height: 38px;
        }
        
        .swiper-slide .buyBtn{
          width: 40%;
          height: 38px;
          float: right;
          margin-top: 10px;
        }

        .swiper-slide .delMoney{
          width: auto;
          height: 38px;
          float: left;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-weight: bold;
          margin-top: 10px;
          color: #C0C0C0;
          line-height: 38px;
          text-decoration:line-through;
          font-size: 18px;
        }

        </style>
</head>
<body>
 <script th:src="@{/static/swiper/swiper-3.4.2.min.js}"></script>

 <div th:replace="include :: header"></div>

<div class="layui-row layui-col-space10" style="max-width: 1200px; margin:20px auto;">
    <div class="layui-col-md12">
      <div class="layui-row grid-demo">
        <div class="layui-col-md8">
            <div class="swiper-container swiper-container1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide swiper-p1"><img src="http://www.yzipi.com/wp-content/themes/yzipi/images/wor.png" width="100%"></div>
                        <div class="swiper-slide swiper-p1"><img src="http://www.yzipi.com/wp-content/uploads/2018/10/ef-1000x556.jpg" width="100%"></div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination swiper-p1"></div>
                    
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev swiper-p1"></div>
                    <div class="swiper-button-next swiper-p1"></div>
                    
                    <!-- 如果需要滚动条 -->
                    <div class="swiper-scrollbar swiper-p1"></div>
                </div>
        </div>
        <div class="layui-col-md4" style="">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title" style="text-align: center;">
                        <li class="layui-this">最新上架</li>
                        <li>热门商品</li>
                        <li>用户登录</li>
                    </ul>
                    <div class="layui-tab-content" style="height: 100%;">

                      <!--最新上架-->
                      <div class="layui-tab-item layui-show">

                          <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="width: 100%;border-radius: 5px;">
                              <li class="layui-nav-item"><a href="">最新商品</a></li>
                              <li class="layui-nav-item"><a href="">最新商品</a></li>
                              <li class="layui-nav-item"><a href="">最新商品</a></li>
                              <li class="layui-nav-item"><a href="">最新商品</a></li>
                              <li class="layui-nav-item"><a href="">最新商品</a></li>
                              <li class="layui-nav-item"><a href="">最新商品</a></li>
                              <li class="layui-nav-item"><a href="">最新商品</a></li>
                              <li class="layui-nav-item"><a href="">最新商品</a></li>
                            </ul>

                      </div>

                      <!--热门商品-->
                      <div class="layui-tab-item">
                        

                          <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="width: 100%;border-radius: 5px;">
                              <li class="layui-nav-item"><a href="">热门商品</a></li>
                              <li class="layui-nav-item"><a href="">热门商品</a></li>
                              <li class="layui-nav-item"><a href="">热门商品</a></li>
                              <li class="layui-nav-item"><a href="">热门商品</a></li>
                              <li class="layui-nav-item"><a href="">热门商品</a></li>
                              <li class="layui-nav-item"><a href="">热门商品</a></li>
                              <li class="layui-nav-item"><a href="">热门商品</a></li>
                              <li class="layui-nav-item"><a href="">热门商品</a></li>
                            </ul>


                      </div>

                      <!--用户登录-->
                      <div class="layui-tab-item">
                          <div class="layui-form"  style=" border:1px solid #009688;padding: 20px 30px;border-radius: 5px; background-color: #393D49;">
                          <form>
                          <div class="layui-form-item">
                              <blockquote class="layui-elem-quote" style="padding: 10px;background-color: #393D49;color: white;height: 16px;line-height: 16x;">用户名</blockquote>
                            <div class="layui-input-block" style="margin: 0;">
                              <input type="text" name="userName" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" style="height: 50px;">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <blockquote class="layui-elem-quote" style="padding: 10px;background-color: #393D49;color: white;height: 16px;line-height: 16x;">密码</blockquote>
                            <div class="layui-input-block" style="margin: 0;">
                              <input type="password" name="userPass" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" style="height: 50px;">
                            </div>
                          </div>
                          </form>
                      <div class="layui-form-item">
                          <button id="TencentCaptcha" class="layui-btn layui-btn-lg layui-btn-normal" style="width: 100%;"
                                  data-appid="2062939338"
                                  data-cbfn="callback">验证</button>
                      </div>
                      <script>
                          window.callback = function(res){
                              console.log(res)
                              // res（用户主动关闭验证码）= {ret: 2, ticket: null}
                              // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
                              if(res.ret === 0){
                                  $.ajax({
                                      type:"post",
                                      url:"/ajax/LoginVf",
                                      data:{ticket:res.ticket,
                                      randstr:res.randstr},
                                      success:function (data) {
                                          if(data == 1){
                                              var capbtn = document.getElementById("TencentCaptcha");
                                              capbtn.innerText = "验证通过";
                                              capbtn.className="layui-btn layui-btn-lg";
                                          }else if(data == -1){
                                              var capbtn = document.getElementById("TencentCaptcha");
                                              capbtn.innerText = "重新验证";
                                          }
                                      }

                                  });

                              }
                          }
                      </script>
                        <div class="layui-form-item">
                          <button type="button" style="width: 100%;" class="layui-btn layui-btn-lg" lay-submit lay-filter="Login" >立即登录</button>
                        </div>
                      </div>
                      </div>
                    </div>
                  </div> 
                </div> 
        </div>
        <hr class="layui-bg-green" style="margin-top:10px;">
        <div class="layui-col-md12">
            <blockquote class="layui-elem-quote" style="background-color:#eee;margin-top: 20px; "><h2>商品列表</h2></blockquote>
            <div class="swiper-container swiper-container2">
                <div class="swiper-wrapper">
                    <div th:each="pd : ${pdlist}" class="swiper-slide swiper-p2">
                        <div class="img">
                            <a th:href="|/pd/${pd.pdId}|">
                                <img th:src="${pd.pdPic}" />
                            </a>
                        </div>
                        <a th:href="|/pd/${pd.pdId}|">
                            <h4 class="title" th:text="${pd.pdName}">NIKE鞋</h4>
                        </a>
                        <h3 class="buyMoney"><i class="layui-icon" style="font-size:20px;">&#xe65e;</i><th:block th:text="${pd.pdPrice}"></th:block></h3 ><h3 class="delMoney" th:text="${pd.pdPrice2}">500</h3>
                        <div class="buyBtn">
                            <a  class="layui-btn layui-btn-radius layui-btn-normal" th:href="|/pd/${pd.pdId}|">立即购买  <i class="layui-icon">&#xe602;</i></a>
                        </div>
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination swiper-p2"></div>
                <!-- Add Arrows -->
                <div class="swiper-button-next swiper-p2"></div>
                <div class="swiper-button-prev swiper-p2"></div>
            </div>
        </div>
      </div>
    </div>
 <div th:replace="include :: footer"></div>
<script>
    var swiper = new Swiper('.swiper-container1', {
        nextButton: '.swiper-button-next ',
        prevButton: '.swiper-button-prev',
        pagination: '.swiper-pagination',
        paginationType: 'progress',
        loop: true,
        autoplay: 2500
    });

    var pageWidth = window.screen.width;
    var viewNum = 1;
    if(pageWidth >= 1200){
      viewNum = 3;
    }else if(pageWidth >= 720){
      viewNum = 2;
    }else{
      viewNum = 1;
    }
    var swiper = new Swiper('.swiper-container2', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        slidesPerView: viewNum,
        centeredSlides: false,
        paginationClickable: true,
        paginationType: 'progress',
        spaceBetween: 30,
        loop:true,
        autoplay: 2500
    });
</script>
<script th:src="@{/static/layui/layui.js}"></script>
<script>
//一般直接写在一个js文件中
layui.use(['carousel','element','form','jquery'], function(){
  var carousel = layui.carousel;
  var element = layui.element;
  var form = layui.form;
  var $ = layui.jquery;
  //建造实例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,arrow: 'always' //始终显示箭头
    ,anim: 'updown' //切换动画方式
  });
  form.on('submit(Login)', function(data){
      var txcpttext = $("#TencentCaptcha").text();
      if(txcpttext != "验证通过"){
          $("#TencentCaptcha").click();
      }
    $.ajax({
        url:"/ajax/Login",
        type:"post",
        data:data.field,
        success:function (res) {
            var txcpt = $("#TencentCaptcha");
            if(res == -1){
                layer.alert('登录失败！账户或密码错误', {icon: 2});
                txcpt.attr("class","layui-btn layui-btn-lg layui-btn-normal");
                txcpt.text("验证");
            }else if(res == -2){
                $("#TencentCaptcha").click();
            }else if(res == -3){
                layer.alert('登录失败！未知错误', {icon: 2});
            }else if(res == 1){
                window.location.href="/admin";
            }
        }
    });
    return false;
  });
});
</script> 
</body>
</html>